HTML5

新增加的属性

构建页面的语义元素：article, aside【附注】, figcaption【图题】, figure【插图】, footer, header, nav【导航链接】, section【内容块】, details【】, summary，main【主要内容】
表示文本的语义元素：mark【引人注意重要内容，黄色背景】, time【标注日期和时间，YYYY-MM-DD HH:MM,可以使用datetime属性进行包含】, wbr
web表单交互： input, datalist, keygen, meter, progress, command, menu, output【JavaScript返回值，计算后的信息】
音视频以及插件：audio, video, source, embed
Cavas: canvas

改变的元素

small，表示附属细则，字体稍小一点
hr，表示主题的转化，在两个区块中画一条线
s，表示不再准确或不再相关的东西，给文本增加一条删除线
粗体和斜体的变化：strong，b，em，i
strong，表示重要的文本，粗体
b，表示文本需要用粗体，但并不重要
em，表示文本需要大声朗读，斜体
i，表示文本需要斜体，但并不重要

表单

fieldset【form中的逻辑块】，legend【fieldset中的标题】
placeholder，添加提示
autofocus,刷新页面自动获得输入框的焦点
required，必填
在两个地方验证：客户端验证【知道自己填写哪里错了，不必提交后才知道错了。】，服务器端验证【确保数据是正确的，预防篡改数据，安全问题】
表单验证伪类：required,optional,valid,invalid,in-range,out-of-range
正则表达式：pattern=””.
自定义验证：validateComments(“errMsg”)
在用户编辑表单时，控制浏览器的行为，而不是验证，输入属性。Spellcheck、Autocomplete、Autocorrect、autocapitalize(虚拟键盘下使用)、Multiple(file,email)
新的输入控件：email，url，search，tel，number(max，min，step)，range(min，max)，date(max,min)，color
新元素：datalist(显示输入建议，必须配合文本框使用，list=”datalist#id” option-value-label)
progress（任务进度,value,max，不设置value则一直在动），meter(已知范围的一个值，比如身高体重等，low，height，max，min)，不能从用户那里收集信息。
HTML编辑器：contenteditable,designMode(未测试，不知道，不用).
enctype有三个值：application/x-www-form-urlencoded[默认值] multipart/form-data[type属性设置为file时需要用到的] text-plain[纯文本]

视频和音频

audio，音频，src，controls,preload(auto,metadata,none),autoplay，loop
video，视频，src，controls，preload，autoplay，loop，muted，width，height(视频总是会保持他自身的尺寸)，poster（视频海报）
mediagroup,媒体组，把一组音频或者视频关联起来，点击播放则两个都一起播放，只需要这个属性值一样就可以实现。
音视频格式：mp3,ogg,wav,mp4,ogv,webm;
MIME类型：一小段信息，表示某种web资源的内容类型。例，网页的MIME是text/html。服务器发送资源给浏览器的时候，会在前面发送MIME类型。
支持多种格式：添加source元素(src,type【mime类型】)，删除src属性。
创建自定义视频播放器，不添加controls，在下方添加自己的播放空间。audio，video都有一个扩展的JavaScript对象模型，我们可以通过diamante控制播放过程。
视频字幕，比较少见了，省略。
使用哔哩哔哩的HTML5播放器。

Canvas绘图

与其他元素相比，canvas独特的地方是需要JavaScript操作。
一个最简单的canvas的三个属性：width、height、id。
canvas中有坐标系的概念，跟其他元素一样都是左上角为原点0，0。

画一条直线

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.moveTo(10,10);
context.lineTo(400,40);
context.lineWidth = 10;
context.strokeStyle = "indigo";
context.lineCap = "round";
context.stroke();

context.beginPath();
context.moveTo(10,10);
context.lineTo(100,100);
context.stroke();

beginPath()通过清空子路径列表开始一个新路径的方法。当你想创建一个新的路径时，调用此方法。closePath()会自动在最后一个绘制点和绘制起点间绘制一条线。

绘制一个三角形

var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");

context.moveTo(250, 50);
context.lineTo(50, 250);
context.lineTo(450,250);
context.closePath();
context.fillStyle = "indigo";
context.fill();
        
context.lineWidth = 10;
context.strokeStyle = "indigo";
context.lineCap = "round";
context.stroke();

矩形框以及矩形填充:strokeRect(x, y, width, height) fillRect()
绘制曲线：arc()[圆弧] artTo()[] bezierCurveTo()[贝塞尔曲线] quadraticCurveTo()[二次元方程式曲线]

画一条圆弧

    window.onload = function () {
        var canvas = document.getElementById("mycanvas");
        var context = canvas.getContext("2d");
        context.lineWidth = 10;
        context.strokeStyle = "indigo";

        var centerX = 150;
        var centerY = 300;
        var radius = 100;
        var startingAngle = 0.75 * Math.PI;
        var endingAngle = 1.75 * Math.PI;

        context.arc(centerX, centerY, radius, startingAngle,endingAngle);
        context.closePath();
        context.stroke();
        
        context.beginPath();
        context.arc(centerX, centerY, radius, 0*Math.PI,2*Math.PI);
        context.stroke();
}
        }

变换：translate(x,y) scale() rotate() matrix()
透明度：rgba context.globalAlpha = 0.5
合成：告诉canvas怎么显示两个重叠的图形。globalCompositeOperation: xor
canvas先告一段落，先继续学习其他内容吧。

数据存储

数据存储可以在两个地方保存：服务器和客户端。web服务器适合保存敏感信息，还有那些你不希望被别人篡改的数据，比如说消费记录。而客户端则使用保存那些不太重要的信息，比如说网页的显示主题和应用状态等。
HTML5以前，在客户端使用COOKIE来保存信息，但cookie有缺点，必须处理过期的数据，还要跟着每一次的请求来来回回的发送和接收这些没用的数据。HTML5新增的本地存储功能能无限期的保存在用户计算机中，不会发送到服务器中（除非手动发送）。这个存储叫Web存储，Web Storage。
HTML5还新增了2个标准：File API,支持这个标准的浏览器能从计算机硬盘的其他文件中读取数据；IndexDB,支持这个标准的浏览器内含一个完整的、微型的数据库引擎。
Web存储分为两种：本地存储，对应localStorage对象，用于长期保存网站的数据，且站内任何页面都可以访问该数据。会话存储，对应sessionStorage对象，用于临时保存针对一个窗口的数据。在访客关闭窗口或标签页之前，这些数据是存在的，而关闭之后就立刻删除。注意，无论是本地存储还是会话存储，都是与网站所在的域联系一起，也就是不能跨域。
HTML5没规定存储空间的大小。但大多数浏览器都是限制为5MB。如果需要更大，就需要另一个数据库标准IndexedDB
存储数据：
本地存储：localStorage.setItem(key,value) .getItem(key)
会话存储：sessionStroage.setItem(key,value) .getItem(key)
删除数据项：localStorage.removeItem(key)
使用.key(index) 和.length查找所有数据项
保存数值和日期：Number()转型函数，如果是日期的话把日期转换为日期的标准的日期文本字符串”YYYY/MM/DD”
转换自定义对象：JSON.stringify(obj),JSON.parse(str)
响应存储变化：web存储发生变化时，其他查看同一页面或同一站点的窗口会触发window.onStorage事件。【event有oldValue，newValue，key，url】
读取文件：使用File API。这个标准只是规定了怎么从硬盘上提取文件，然后交给网页中运行的JavaScript代码。
取得文件的三种方式（归根结底只有访客自己选择文件然后提交）;

使用input元素，将type设置为file。

window.onload = function() {
    var fileElm = document.getElementById("file");
    fileElm.addEventListener("change", function(e) {
        var file = this.files[0];
        // 创建一个读取文件的对象
        var reader = new FileReader();
        // 读取文件完成事件
        reader.onload = function(e) {
            var output = document.getElementById("fileOutput");
            output.textContent = e.target.result;
        };
        reader.readAsText(file);
    }, false);
}

隐藏input元素，而现实一个漂亮的按钮。用户单击按钮就通过JavaScript调用隐藏的input元素的click()方法触发事件。
1
2
3
#fileInput {
display: none;
}

window.onload = function () {
    var fileElm = document.getElementById("file");
    fileElm.addEventListener("change", function (e) {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function (e) {
            var output = document.getElementById("fileOutput");
            output.textContent = e.target.result;
        };
        reader.readAsText(file);
    }, false);
    var uploadBtn = document.getElementById("uploadBtn");
    uploadBtn.addEventListener("click", function (e) {
        fileElm.click();
    });
}

拖放，如果浏览器支持拖放，可以把文件拖到网页上。

window.onload = function(e) {
    var dropBox = document.getElementById("dropBox");
    // 用同样的函数处理事件，告诉浏览器什么也不做
    function ignoreDrag(e) {
        e.stopPropagation();
        e.preventDefault();
    }
    dropBox.addEventListener("dragenter", ignoreDrag, false);
    dropBox.addEventListener("dragover", ignoreDrag, false);
    dropBox.addEventListener("drop", function(e) {
        e.stopPropagation();
        e.preventDefault();
        // 因为这里不是input，不能够直接this.files[0]取得文件，
        // 需要e.dataTransfer获得拖拽文件数据。
        var data = e.dataTransfer; 
        // 从数据中得到文件
        var files = data.files;
        // 生成一个文本参数
        processFiles(files);
    });
    function processFiles(files) {
        var file = files[0];

        var reader = new FileReader();
        
        reader.onload = function(e) {
            dropBox.style.backgroundImage = "url('" + e.target.result + "')";
        }
        // 以dataURL的形式读取文件
        reader.readAsDataURL(file);
    }
}

IndexDB:浏览器数据引擎。略。
离线应用。
HTML5提供了两种与服务器通信的方式：
服务器发送事件，server-sent event：让服务器定定时给网页发送信息
Web Socket框架，让浏览器和服务器能够随心所欲的双向通信
轮询：每隔一段时间就向服务器请求新数据。可以使用JavaScript的setTimeout或者SetInterval。但这样效率不高，因为这样只是想知道是否有新的数据。如果有很多用户都这样干，服务器就炸了。

服务器发送事件,实现代码

// node.js 作为后端
res.writeHead(200, {
    "Content-Type": "text/event-stream",
    "Cache-Control": "no-cache",
    "Accept-Charset": "utf-8"
});
res.write("retry: 120000" + os.EOL);

var startTime = new Date().getTime();
function intv() {
    var currentTime = new Date();
    res.write(`data: ${currentTime} ${os.EOL}`);
    res.write(os.EOL);

    var serverSent = setTimeout(intv, 2000);
    if (new Date().getTime() - startTime > 10000) {
        clearTimeout(serverSent);
        res.end();
    }
}
setTimeout(intv, 2000);
// 客户端JavaScript
function startListening() {
  source = new EventSource("http://localhost:8080/");
  source.onmessage = receiveMessage;
  messageLog.innerHTML += "<br>" + "Started listening for messages."
}

function stopListening() {
  source.close();
  messageLog.innerHTML += "<br>" + "No longer listening for messages."
}

function receiveMessage(event) {
  messageLog.innerHTML += "<br>" + "New web server time received: " + event.data;
  timeDisplay.innerHTML = event.data;
}

Web Socket：浏览器能保持对web服务器打开的连接，从而长时间跟服务器交换数据。略。

Janro-Cheung

HTML5编程

HTML5

新增加的属性

改变的元素

表单

视频和音频

Canvas绘图

数据存储